Adwaita: slightly increase contrast for treeview borders
authorJakub Steiner <jimmac@gmail.com>
Wed, 15 Apr 2020 12:53:19 +0000 (14:53 +0200)
committerJakub Steiner <jimmac@gmail.com>
Wed, 15 Apr 2020 12:55:33 +0000 (14:55 +0200)
- sligtly increase contrast for the treeview borders
- FIXME: High Contrast seems to drop the borders completely,
  there might be some trickery for using border-left-color and
  border-top-color this way as even forcing the color 'red' seems
  to render invisible on HC.

Fixes https://gitlab.gnome.org/GNOME/gtk/-/issues/2238

gtk/theme/Adwaita/_common.scss

index 351c3094628f78b7208aac66b0ff6cd0c1136749..90081bbc25a9314aa9c84e70c792406ebe18079e 100644 (file)
@@ -1661,9 +1661,12 @@ pathbar > button {
 /**************
  * Tree Views *
  **************/
+
+$_treeview_borders_color: if($variant=='light',mix($borders_color, $base_color,80%),mix($fg_color, $base_color, 20%));
+$_treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 80%),mix($backdrop_fg_color, $base_color, 20%));
 treeview.view {
-  border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
-  border-top-color: $bg_color;                         // while this is the grid lines color, better then nothing
+  border-left-color:  $_treeview_borders_color; // this is actually the tree lines color,
+  border-top-color: $_treeview_borders_color;                         // while this is the grid lines color, better then nothing
 
   > rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
 
@@ -1675,8 +1678,8 @@ treeview.view {
     }
 
     &:backdrop, & {
-      border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
-      border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
+      border-left-color: $_treeview_backdrop_borders_color;
+      border-top-color: $_treeview_backdrop_borders_color; // doesn't work unfortunatelly
     }
   }
 
@@ -1693,14 +1696,14 @@ treeview.view {
 
   &.separator {
     min-height: 2px;
-    color: $bg_color;
+    color: $_treeview_borders_color;
 
-    &:backdrop { color: transparentize($bg_color, 0.9); }
+    &:backdrop { color: transparentize($borders_color, 0.8); }
   }
 
   &:backdrop {
-    border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
-    border-top: $backdrop_bg_color;
+    border-left-color: $_treeview_backdrop_borders_color;
+    border-top: $_treeview_backdrop_borders_color;
   }
 
   &:drop(active) {
@@ -1842,7 +1845,7 @@ treeview.view {
   padding: 0 6px;
   background-image: none;
   border-style: none solid solid none;
-  border-color: $bg_color;
+  border-color: $_treeview_borders_color;
   border-radius: 0;
   text-shadow: none;
 
@@ -1853,7 +1856,7 @@ treeview.view {
 
   &:backdrop {
     color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
-    border-color: $backdrop_bg_color;
+    border-color: $_treeview_backdrop_borders_color;
     border-style: none solid solid none;
     background-image: none;
     background-color: $backdrop_base_color;